<template>
   
        <div class="history-hot">
            <div class="his-hot" v-show="isShowHistory">
                <div class="hd">
                    <h4>历史记录</h4>
                    <van-icon name="delete-o" @click="delClick"/>
                </div>
                <div class="bd">
                    <van-tag plain type="primary" text-color="#666" 
                    v-for="(item,index) in historyKeywordList" :key="index" 
                    @click="tagClick(item)">
                    {{item}}
                    </van-tag>
                </div>
            </div>
            <div class="his-hot hot">
                <div class="hd">
                    <h4>热门搜索</h4>
                </div>
                <div class="bd">
                    <van-tag plain :type="item.is_hot?'danger':'primary'" text-color="#666" 
                    v-for="(item,index) in hotKeywordList" :key="index" 
                    @click="tagClick(item.keyword)">
                    {{item.keyword}}
                    </van-tag>
                </div>
            </div>
        </div>
    
</template>

<script>
import {delHistory} from "@/request/api"
export default {
    data () {
        return {
            isShowHistory:true
 
        }
    },
    props:["hotKeywordList","historyKeywordList"],
    methods:{
        tagClick(value){
            this.$emit("tagClick",value)
        },
        delClick(){
            delHistory().then(res=>{
                this.$toast('删除成功');
                setTimeout(() => {
                   this.isShowHistory=false
                }, 500);
            })
        }
    }
}
</script>
 
<style lang = "less" scoped>
    .his-hot{
        background-color: #fff;
        padding: 10px;
        margin: 10px 0;
        .hd{
            display: flex;
            justify-content: space-between;
            font-size: 18px;
            margin-bottom: 10px;
        }
        .bd{
            .van-tag{
                margin-right: 10px;
            }
        }
    }
    .van-tag--danger.van-tag--plain {
    color: #ee0a24!important;
    border-color: #ee0a24!important;
  }
  
</style>